/**
 * @用途 布局界面状态管理
 * @description 管理浏览器布局界面的各种UI状态，包括：
 * - 地址栏下拉菜单显示状态
 * - 侧边栏添加按钮显示状态（左右侧边栏）
 * - 统一添加页面对话框的显示和配置
 * - 布局界面置顶模式的控制
 *
 * 该store主要负责控制布局界面中各种弹出层、对话框和交互元素的显示状态，
 * 确保UI交互的一致性和用户体验的流畅性。
 *
 * @author 黄敏
 * @创建时间 2025-08-02 15:07
 **/

import { defineStore } from 'pinia'

export const useLayoutStore = defineStore('layout', () => {
  // 地址栏下拉菜单是否显示（地址栏输入建议菜单）
  const showAddressBarMenu = ref(false)
  // 地址栏主菜单（Edge样式）是否显示
  const showAddressBarMainMenu = ref(false)
  // 主边栏添加按钮是否显示（保留向后兼容）
  const showPrimarySidebarAddButton = ref(false)
  // 右边栏添加按钮是否显示（保留向后兼容）
  const showRightSidebarAddButton = ref(false)

  // 显示翻译面板的id集合
  const showTranslatePanelIds = ref<Set<number>>(new Set())
  // 密码保存提示
  const showSavePasswordIds = ref<Set<number>>(new Set())
  const showBookmarkIds = ref<Set<number>>(new Set())

  // 分组详情抽屉
  const showGroupDrawer = ref(false)
  const groupParams = ref<Record<string, any> | null>(null)

  // 书签抽屉（右侧快速访问）
  const showBookmarkDrawer = ref(false)

  // 新的统一添加页面对话框状态
  const showAddPageDialog = ref(false)
  const addPageDialogConfig = ref<'left' | 'right'>('left')

  // 布局界面是否是置顶模式
  const isTop = computed(() => {
    return (
      showAddressBarMenu.value ||
      showAddressBarMainMenu.value ||
      showPrimarySidebarAddButton.value ||
      showRightSidebarAddButton.value ||
      showAddPageDialog.value ||
      showTranslatePanelIds.value.size > 0 ||
      showSavePasswordIds.value.size > 0 ||
      showBookmarkIds.value.size > 0 ||
      showGroupDrawer.value ||
      showBookmarkDrawer.value
    )
  })

  /**
   * 设置窗口置顶
   */
  const setTop = (hasTop: boolean) => {
    _pre_.browser.setLayer(hasTop)
  }

  let timeout = 0
  watch(isTop, () => {
    clearTimeout(timeout)

    if (isTop.value) {
      setTop(isTop.value)
    } else {
      timeout = window.setTimeout(() => {
        setTop(false)
      }, 300)
    }
  })

  /**
   * 显示添加页面对话框
   * @param sidebar 目标边栏 ('left' | 'right')
   */
  function showAddPageDialogFor(sidebar: 'left' | 'right') {
    addPageDialogConfig.value = sidebar
    showAddPageDialog.value = true
  }

  // 中心面板页面选择（Login/Start/分组详情等）
  const centerPanelPage = ref<'default' | 'group-inspector'>('default')
  const centerPanelParams = ref<Record<string, any> | null>(null)

  function showGroupInspector(groupId: number) {
    // 改为以抽屉形式展示
    showGroupDrawer.value = true
    groupParams.value = { groupId }
  }
  function closeGroupInspector() {
    showGroupDrawer.value = false
    groupParams.value = null
  }
  function resetCenterPanelPage() {
    centerPanelPage.value = 'default'
    centerPanelParams.value = null
  }

  const storeInstance = {
    showAddressBarMenu,
    showAddressBarMainMenu,
    showPrimarySidebarAddButton,
    showRightSidebarAddButton,
    showAddPageDialog,
    addPageDialogConfig,
    showAddPageDialogFor,
    // 分组详情抽屉
    showGroupDrawer,
    groupParams,
    showGroupInspector,
    closeGroupInspector,
    // 书签抽屉
    showBookmarkDrawer,
    // 中心面板页面控制（保留以兼容老逻辑）
    centerPanelPage,
    centerPanelParams,
    resetCenterPanelPage,
    // 翻译面板状态控制
    showTranslatePanelIds,
    showSavePasswordIds,
    showBookmarkIds,
    // 置顶控制
    isTop,
    setTop
  }

  // 仅在 E2E 环境将 layoutStore 暴露到全局（用于测试）
  // @ts-ignore
  if (globalThis._pre_ && _pre_.isE2E) {
    // @ts-ignore
    ;(globalThis as any).layoutStore = storeInstance
  }

  return storeInstance
})
